import "../css/help.css";
import CommonUtils from '../../pages/ruijing/common/utils/CommonUtils'
import helpCenterTitle from '../images/helpCenterTitle_bg.png'
import TopHeader from "@page/common/comps/CommonHeader";
function HelpColumns(props) {

    //初始化插件入参
    const {inputdata} = props;

    //初始化插件状态值及状态更新方法
    const [helpColumnStatus, updatehelpColumnStatus] = React.useState({
        loadData:inputdata
    })

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...helpColumnStatus, ...value };
        console.log(newValue);
        updatehelpColumnStatus(newValue);
    }

    //更新视图数据方法外部接口
    function updateFunctions(param1){
        _updateData(
            (helpColumnStatus.loadData = param1),
        )
    }

    function jumpToProblems(e,columnId){
        StateApi.updateStoreState("commonHeaderConfig", { helpCenter: "2" });
        setTimeout(
        $state.go({
            stateName: "/HelpProblems",
            reload:true,
            params: {
                columnId: columnId,
                articleId:0,
                targetType:1,
                publishTime:0,
                search:""
            }
        }),500);
        //window.location.href = "#HelpProblems?columnId="+columnId+"&articleId=0&targetType=1&publishTime=0";
    }

    function jumpToProblems2(e,item,columnId){
        StateApi.updateStoreState("commonHeaderConfig", { helpCenter: "2" });
        //window.location.href = "#HelpProblems?columnId="+columnId+"&articleId="+item.id+"&targetType=2&publishTime="+item.publishTime;
        setTimeout(
            $state.go({
                stateName: "/HelpProblems",
                reload:true,
                params: {
                    columnId: columnId,
                    articleId:item.id,
                    targetType:2,
                    publishTime:item.publishTime,
                    search:""
                }
        }),500);
    }

    //componentOnMount
    React.useEffect(() => {
        if(inputdata.columnId!=helpColumnStatus.loadData.columnId){
            updateFunctions(inputdata);
        }
    });

    return (
        <div className="zen_il-bl zen_t-c zen_w-p100">
            <div className="zen_FFFFFF zen_p-10 zen_t-l helpColumnsTitle"><div className="zen_il-bl zen_w-180 zen_elli zen_fs-18">{helpColumnStatus.loadData.columnName}</div><div className="zen_il-bl zen_f-right zen_cur-p zen_fs-14 zen_m-t-3" key={helpColumnStatus.loadData.columnId} onClick={e => {jumpToProblems(e,helpColumnStatus.loadData.columnId)}}>查看更多></div></div>
            <ul className="zen_p-10 zen_t-l zen_h-230 zen_bg-FFFFFF" style={{border:"1px solid #ccc",listStyleType: "disc",listStylePosition: "inside"}}>
                {helpColumnStatus.loadData.onLineNoticeDtoList.map((item,key) =>{
                    return(
                        <li key={item.id} className="zen_cur-p" onClick={e => {jumpToProblems2(e,item,helpColumnStatus.loadData.columnId)}} style={{padding:"12px 0px"}}>
                            <div className="zen_il-bl zen_w-250 zen_elli zen_fs-14 zen_3C3C3C helpTitle">{item.title}</div>
                            <div className="zen_il-bl zen_fs-14 zen_f-right zen_969696">{CommonUtils.getDateStr((item.publishTime))}</div>
                        </li>
                    )
            })}
            </ul>
        </div>
    )
}

export default HelpColumns;